<template>
  <div class="order-detail-page min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
      <div class="lg:max-w-[1200px] mx-auto">
        <!-- 返回按钮 -->
        <div class="mb-6">
          <el-button
            link
            class="!px-0 !h-auto text-gray-600 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-400"
            @click="handleBack"
          >
            <el-icon class="mr-2"><ArrowLeft /></el-icon>
            返回订单列表
          </el-button>
        </div>

        <!-- 加载状态 -->
        <div v-if="loading" class="py-8">
          <el-skeleton :rows="10" animated />
        </div>

        <template v-else>
          <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            <!-- 左侧主要内容 -->
            <div class="lg:col-span-8 space-y-6">
              <!-- 订单状态卡片 -->
              <div
                class="bg-white dark:bg-gray-800 rounded-lg shadow-sm dark:border dark:border-gray-700 overflow-hidden"
              >
                <div
                  class="bg-primary-500 dark:bg-primary-600 text-white px-6 py-6"
                >
                  <div class="flex items-center justify-between">
                    <div>
                      <h2 class="text-xl font-medium mb-2">
                        {{ getStatusText }}
                      </h2>
                      <p class="text-primary-100 text-sm">
                        {{ getStatusDescription }}
                      </p>
                    </div>
                    <div class="text-right">
                      <div class="text-sm mb-2">订单金额</div>
                      <div class="text-2xl font-bold">
                        ¥{{ orderInfo.payableAmount.toFixed(2) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 门票信息卡片 -->
              <div
                class="bg-white dark:bg-gray-800 rounded-lg shadow-sm dark:border dark:border-gray-700 overflow-hidden"
              >
                <div
                  class="px-6 py-4 border-b border-gray-100 dark:border-gray-700"
                >
                  <h3 class="text-lg font-medium dark:text-gray-100">
                    门票信息
                  </h3>
                </div>
                <div class="p-6">
                  <div class="space-y-6">
                    <!-- 景点信息 -->
                    <div
                      class="flex items-start gap-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
                    >
                      <el-image
                        :src="orderInfo.booking?.spotImage"
                        class="w-32 h-32 rounded-lg object-cover"
                      />
                      <div class="flex-1">
                        <h4 class="text-lg font-medium mb-2 dark:text-gray-100">
                          {{ orderInfo.booking?.spotName }}
                        </h4>
                        <p class="text-gray-600 dark:text-gray-400 mb-2">
                          {{ orderInfo.booking?.ticketName }}
                        </p>
                        <div class="text-sm text-gray-500 dark:text-gray-400">
                          <span
                            >游玩日期：{{
                              formatDate(
                                orderInfo.booking?.visitDate,
                                "YYYY-MM-DD",
                              )
                            }}</span
                          >
                        </div>
                      </div>
                      <div class="text-right">
                        <div
                          class="text-lg font-medium text-primary-600 dark:text-primary-400"
                        >
                          ¥{{ orderInfo.booking?.price
                          }}<span class="text-sm">/张</span>
                        </div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">
                          {{ orderInfo.booking?.quantity }}张
                        </div>
                      </div>
                    </div>

                    <!-- 游客信息 -->
                    <div class="space-y-4">
                      <h4 class="font-medium dark:text-gray-100">游客信息</h4>
                      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div
                          v-for="(visitor, index) in orderInfo.booking
                            ?.visitors"
                          :key="index"
                          class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
                        >
                          <div class="flex items-center mb-2">
                            <span
                              class="w-6 h-6 flex items-center justify-center rounded-full bg-primary-50 text-primary-600 mr-2 text-sm"
                            >
                              {{ index + 1 }}
                            </span>
                            <span class="font-medium dark:text-gray-100"
                              >游客信息</span
                            >
                          </div>
                          <div class="space-y-2 text-sm">
                            <div class="flex justify-between">
                              <span class="text-gray-500 dark:text-gray-400"
                                >姓名</span
                              >
                              <span class="text-gray-900 dark:text-gray-100">{{
                                visitor.name
                              }}</span>
                            </div>
                            <div class="flex justify-between">
                              <span class="text-gray-500 dark:text-gray-400"
                                >证件类型</span
                              >
                              <span class="text-gray-900 dark:text-gray-100">
                                {{
                                  visitor.idType === "idcard"
                                    ? "身份证"
                                    : "护照"
                                }}
                              </span>
                            </div>
                            <div class="flex justify-between">
                              <span class="text-gray-500 dark:text-gray-400"
                                >证件号码</span
                              >
                              <span class="text-gray-900 dark:text-gray-100">{{
                                visitor.idNumber
                              }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 联系人信息 -->
                    <div class="space-y-4">
                      <h4 class="font-medium dark:text-gray-100">联系人信息</h4>
                      <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                        <div class="space-y-2 text-sm">
                          <div class="flex justify-between">
                            <span class="text-gray-500 dark:text-gray-400"
                              >联系人</span
                            >
                            <span class="text-gray-900 dark:text-gray-100">{{
                              orderInfo.booking?.contactName
                            }}</span>
                          </div>
                          <div class="flex justify-between">
                            <span class="text-gray-500 dark:text-gray-400"
                              >联系电话</span
                            >
                            <span class="text-gray-900 dark:text-gray-100">{{
                              orderInfo.booking?.contactPhone
                            }}</span>
                          </div>
                          <div class="flex justify-between">
                            <span class="text-gray-500 dark:text-gray-400"
                              >电子邮箱</span
                            >
                            <span class="text-gray-900 dark:text-gray-100">{{
                              orderInfo.booking?.contactEmail
                            }}</span>
                          </div>
                          <div class="flex justify-between">
                            <span class="text-gray-500 dark:text-gray-400"
                              >特殊要求</span
                            >
                            <span class="text-gray-900 dark:text-gray-100">{{
                              orderInfo.booking?.specialRequests || "无"
                            }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 右侧侧边栏 -->
            <div class="lg:col-span-4">
              <div class="lg:sticky lg:top-24 space-y-6">
                <!-- 订单信息卡片 -->
                <div
                  class="bg-white dark:bg-gray-800 rounded-lg shadow-sm dark:border dark:border-gray-700 overflow-hidden"
                >
                  <div
                    class="px-6 py-4 border-b border-gray-100 dark:border-gray-700"
                  >
                    <h3 class="text-lg font-medium dark:text-gray-100">
                      订单信息
                    </h3>
                  </div>
                  <div class="p-6">
                    <div class="space-y-4">
                      <div class="flex justify-between">
                        <span class="text-gray-500 dark:text-gray-400"
                          >订单编号</span
                        >
                        <span
                          class="text-gray-900 dark:text-gray-100 font-mono"
                          >{{ orderInfo.orderNo }}</span
                        >
                      </div>
                      <div class="flex justify-between">
                        <span class="text-gray-500 dark:text-gray-400"
                          >下单时间</span
                        >
                        <span class="text-gray-900 dark:text-gray-100">{{
                          formatDate(orderInfo.createTime)
                        }}</span>
                      </div>
                      <div class="flex justify-between">
                        <span class="text-gray-500 dark:text-gray-400"
                          >支付方式</span
                        >
                        <span class="text-gray-900 dark:text-gray-100">{{
                          orderInfo.paymentMethod === "wechat"
                            ? "微信支付"
                            : "支付宝"
                        }}</span>
                      </div>
                      <div class="flex justify-between">
                        <span class="text-gray-500 dark:text-gray-400"
                          >支付时间</span
                        >
                        <span class="text-gray-900 dark:text-gray-100">{{
                          formatDate(orderInfo.payTime)
                        }}</span>
                      </div>
                      <div class="flex justify-between">
                        <span class="text-gray-500 dark:text-gray-400"
                          >订单状态</span
                        >
                        <el-tag :type="getStatusType">{{
                          getStatusText
                        }}</el-tag>
                      </div>
                      <div class="flex justify-between">
                        <span class="text-gray-500 dark:text-gray-400"
                          >订单备注</span
                        >
                        <span class="text-gray-900 dark:text-gray-100">{{
                          orderInfo.remark || "无"
                        }}</span>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 费用信息卡片 -->
                <div
                  class="bg-white dark:bg-gray-800 rounded-lg shadow-sm dark:border dark:border-gray-700 overflow-hidden"
                >
                  <div
                    class="px-6 py-4 border-b border-gray-100 dark:border-gray-700"
                  >
                    <h3 class="text-lg font-medium dark:text-gray-100">
                      费用信息
                    </h3>
                  </div>
                  <div class="p-6">
                    <div class="space-y-4">
                      <div
                        class="flex justify-between text-gray-500 dark:text-gray-400"
                      >
                        <div>
                          <span>门票费用</span>
                          <span class="text-sm ml-2">
                            ({{ orderInfo.booking?.quantity }}张 × ¥{{
                              orderInfo.booking?.price
                            }})
                          </span>
                        </div>
                        <span>¥{{ orderInfo.booking?.totalAmount }}</span>
                      </div>
                      <div
                        class="flex justify-between text-gray-500 dark:text-gray-400"
                      >
                        <span>服务费</span>
                        <span>¥{{ orderInfo.booking?.serviceFee }}</span>
                      </div>
                      <div
                        class="border-t border-gray-100 dark:border-gray-700 pt-4 flex justify-between text-lg font-medium"
                      >
                        <span class="dark:text-gray-100">实付金额</span>
                        <span class="text-primary-600 dark:text-primary-400">
                          ¥{{ orderInfo.payableAmount.toFixed(2) }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { ArrowLeft } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import axios from "@/api/axios";

const router = useRouter();
const route = useRoute();
const loading = ref(true);

// 订单信息
const orderInfo = ref({
  orderNo: "",
  title: "",
  createTime: "",
  payTime: "",
  paymentMethod: "",
  payableAmount: 0,
  status: "paid",
  remark: "",
  booking: null,
});

// 计算属性
const getStatusText = computed(() => {
  const statusMap = {
    unpaid: "待支付",
    paid: "待使用",
    processing: "使用中",
    completed: "已完成",
    cancelled: "已取消",
  };
  return statusMap[orderInfo.value.status] || "未知状态";
});

const getStatusDescription = computed(() => {
  const descMap = {
    unpaid: "请尽快完成支付，超时订单将自动取消",
    paid: `请于${formatDate(orderInfo.value.booking?.visitDate, "YYYY-MM-DD")}使用门票`,
    processing: "祝您游玩愉快",
    completed: "感谢您的游玩，欢迎再次光临",
    cancelled: "订单已取消",
  };
  return descMap[orderInfo.value.status] || "";
});

const getStatusType = computed(() => {
  const typeMap = {
    unpaid: "warning",
    paid: "success",
    processing: "primary",
    completed: "success",
    cancelled: "info",
  };
  return typeMap[orderInfo.value.status] || "info";
});

// 方法
const handleBack = () => {
  router.push("/user/orders");
};

const formatDate = (date, format = "YYYY-MM-DD HH:mm:ss") => {
  return date ? dayjs(date).format(format) : "";
};

// 获取订单详情
const fetchOrderDetail = async (orderId) => {
  try {
    loading.value = true;
    
    // 调用获取订单详情API
    try {
      const response = await axios.get(`/orders/${orderId}`);
      
      if (response && response.type === 'ticket') {
        // 使用API返回的数据
        orderInfo.value = response;
        return;
      }
    } catch (error) {
      console.error("获取门票订单详情API失败:", error);
      // 发生错误，使用测试数据
    }

    // 使用测试数据
    orderInfo.value = {
      orderNo: orderId,
      title: "贵港博物馆 - 成人票",
      createTime: "2024-01-25 10:30:00",
      payTime: "2024-01-25 10:35:00",
      paymentMethod: "wechat",
      payableAmount: 158.4,
      status: "paid",
      remark: "需要导游讲解服务",
      booking: {
        spotName: "贵港博物馆",
        ticketName: "成人票",
        spotImage: "/images/spots/museum.jpg",
        visitDate: "2024-02-01",
        quantity: 2,
        price: 68,
        totalAmount: 136,
        serviceFee: 22.4,
        visitors: [
          {
            name: "张三",
            idType: "idcard",
            idNumber: "450800199001011234",
          },
          {
            name: "李四",
            idType: "idcard",
            idNumber: "450800199001015678",
          },
        ],
        contactName: "张三",
        contactPhone: "13800138000",
        contactEmail: "zhangsan@example.com",
        specialRequests: "需要导游讲解服务",
      },
    };
  } catch (error) {
    console.error("获取订单详情失败:", error);
    ElMessage.error("获取订单详情失败");
    router.push("/user/orders");
  } finally {
    loading.value = false;
  }
};

// 页面加载
onMounted(async () => {
  const orderId = route.params.id || route.query.orderId;
  if (!orderId) {
    ElMessage.error("订单ID不能为空");
    router.push("/user/orders");
    return;
  }
  await fetchOrderDetail(orderId);
});
</script>

<style lang="scss" scoped>
.order-detail-page {
  :deep(.el-tag) {
    @apply rounded-md;

    &.el-tag--success {
      @apply bg-green-50 text-green-600 border-green-200 dark:bg-green-900/20 dark:text-green-400 dark:border-green-700;
    }

    &.el-tag--warning {
      @apply bg-yellow-50 text-yellow-600 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-400 dark:border-yellow-700;
    }

    &.el-tag--info {
      @apply bg-gray-50 text-gray-600 border-gray-200 dark:bg-gray-900/20 dark:text-gray-400 dark:border-gray-700;
    }
  }
}
</style>
